<div id="mainContent">
    <h1>Buscar Habitacion</h1>

    <br/>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-inline">
                <div class="form-group">
                    <label class="control-labe" for="inputEdificio">Edificio</label> 
                    <br/>
                    <div id="inputEdificio-message"></div>
                    <select class="form-control" id="inputEdificio" placeholder="Edificio">
                        <option value="0">Todos</option>
                        <?php
                        foreach ($decEdificioTable as $object) {
                            $decEdificio = new DecEdificio();
                            $decEdificio = (object) $object;

                            echo "<option value='{$decEdificio->getEdiId()}'>{$decEdificio->getEdiEdificio()}</option>";
                        }
                        ?>
                    </select>
                </div>

                &nbsp;
                &nbsp;

                <div class="form-group">
                    <label class="control-labe" for="inputTipo">Tipo</label>
                    <br/>
                    <div id="inputTipo-message"></div>
                    <select class="form-control" id="inputTipo" placeholder="Tipo">
                        <option value="0">Todos</option>
                        <?php
                        foreach ($decHabitacionTipoTable as $object) {
                            $decHabitacionTipo = new DecHabitacionTipo();
                            $decHabitacionTipo = (object) $object;

                            echo "<option value='{$decHabitacionTipo->getHatId()}'>{$decHabitacionTipo->getHatTipo()}</option>";
                        }
                        ?>
                    </select>
                </div>

                &nbsp;
                &nbsp;

                <div class="form-group">
                    <label class="control-labe" for="inputDesde">Desde</label>
                    <br/>
                    <div id="inputDesde-message"></div>
                    <input type="date" class="form-control" id="inputDesde" placeholder="Desde">
                </div>

                &nbsp;
                &nbsp;

                <div class="form-group">
                    <label class="control-labe" for="inputHasta">Hasta</label>
                    <br/>
                    <div id="inputHasta-message"></div>
                    <input type="date" class="form-control" id="inputHasta" placeholder="Hasta">
                </div>

                &nbsp;
                &nbsp;

                <div class="form-group">
                    <label class="control-labe" for="buttonBuscar">&nbsp;</label>
                    <br/>
                    <button type="button" class="btn btn-primary" id="buttonBuscar">Buscar</button>
                </div>

            </div>
        </div>
    </div>

    <div id="divData">
        <table class="table table-bordered" id="tableList">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Edificio</th>
                    <th>Tipo Habitacion</th>
                    <th>Numero Habitacion</th>
                    <th>Accion</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<div id="secContent">

</div>

<script>
    $(document).ready(function () {
        /* DATATABLE */
        $("#tableList").DataTable();
        /* LISTENERS */
        $("#buttonBuscar").click(function () {
            if (isValid()) {
                buscar();
            }
        });
    });

    function isValid() {
        var valid = true;

        var id = "inputDesde";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            clearError(id);
        }

        var id = "inputHasta";
        if (isEmpty($("#" + id).val())) {
            valid = false;
            setError(id, "Campo requerido");
        } else {
            var dateDesde = new Date($("#inputDesde").val());
            var dateHasta = new Date($("#inputHasta").val());
            if (dateHasta < dateDesde) {
                valid = false;
                setError(id, "La fecha final debe ser mayor");
            } else {
                clearError(id);
            }
        }

        return valid;
    }

    function buscar() {
        $("#divData").html("<center><img src='<?php echo image_path("preloader.gif"); ?>'></center>");

        var inputEdificio = $("#inputEdificio option:selected").val();
        var inputTipo = $("#inputTipo option:selected").val();
        var inputDesde = $("#inputDesde").val();
        var inputHasta = $("#inputHasta").val();

        $.ajax({
            type: "post",
            url: "<?php echo url_for("buscar/buscar"); ?>",
            dataType: "html",
            data: {
                inputEdificio: inputEdificio,
                inputTipo: inputTipo,
                inputDesde: inputDesde,
                inputHasta: inputHasta
            },
            success: function (response) {
                $("#divData").html(response);
            }
        });
    }

    function reservar(id) {
        $("#mainContent").hide();
        $("#secContent").html("<center><img src='<?php echo image_path("preloader.gif"); ?>'></center>");

        var inputDesde = $("#inputDesde").val();
        var inputHasta = $("#inputHasta").val();

        $.ajax({
            url: "<?php echo url_for("registrar_habitacion/index"); ?>",
            dataType: "html",
            data: {
                id: id,
                inputDesde: inputDesde,
                inputHasta: inputHasta
            },
            success: function (data) {
                $("#secContent").html(data);
            }
        });
    }

    function cancelarReservacion() {
        $("#mainContent").show();
        $("#secContent").empty();
    }
</script>